<template>
  <div class="random-shoot" v-if="form_cluster && form_cluster.length !== 0">
    <c-title :text="text"></c-title>
    <div style="background: #fff;padding: .2813rem 1.0625rem;margin-bottom: 1rem;">
      <div v-if="detail" style="width: 100%; background-color: #fff;">
        <div class="detail" v-html="detail"></div>
      </div>
    </div>

    <van-field v-model="name" :placeholder="form_cluster[0].tips.split('：')[1]" input-align="right">
      <div slot="label">
        <i class="iconfont icon-wode-wode" style="color: #3189E3;margin-right: .5rem;"></i>
        <span :class="{ required: form_cluster[0].required }">{{ form_cluster[0].title }}</span>
      </div>
    </van-field>
    <van-field v-model="phone" label-class="field-left" :placeholder="form_cluster[1].tips.split('：')[1]"
      input-align="right">
      <div slot="label">
        <i class="iconfont icon-zx_map_tel" style="color: #3189E3;margin-right: .5rem;"></i>
        <span :class="{ required: form_cluster[1].required }">{{ form_cluster[1].title }}</span>
      </div>
    </van-field>
    <van-cell title-style="text-align:left;" is-link :value="address_title || '请选择区域'" @click="addressShow = true">
      <template #title>
        <i class="iconfont icon-zx_map_locate1" style="color: #3189E3;margin-right: .5rem;"></i>
        <span :class="{ required: form_cluster[2].required }">{{ form_cluster[2].title }}</span>
      </template>
    </van-cell>
    <van-cell title-style="text-align:left;" @click="select_location" is-link :value="locationTitle || '请选择定位'">
      <template #title>
        <i class="iconfont icon-zx_map_local" style="color: #3189E3;margin-right: .5rem;"></i>
        <span :class="{ required: form_cluster[3].required }">{{ form_cluster[3].title }}</span>
      </template>
    </van-cell>
    <van-cell title-style="text-align:left;" :value="time" is-link @click="show_popup">
      <template #title>
        <i class="iconfont icon-lishi" style="color: #3189E3;margin-right: .5rem;"></i>
        <span :class="{ required: form_cluster[4].required }">{{ form_cluster[4].title }}</span>
      </template>
    </van-cell>
    <div class="textarea">
      <p style="text-align: left;">
        <i class="iconfont icon-qhm_service" style="color: #3189E3;margin-right: .5rem;"></i>
        <span class="required-rows" :class="{ required: form_cluster[5].required }">{{ form_cluster[5].title }}</span>
      </p>
      <div class="box">
        <van-field v-model="message" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入留言"
          show-word-limit />
      </div>
    </div>
    <div class="photo">
      <p style="text-align: left;">
        <i class="iconfont icon-jk_haibao" style="color: #3189E3;margin-right: .5rem;"></i>
        {{ form_cluster[6].title }}<span style="color: #AAAAB3 ;">（可多张）</span>
      </p>
      <div class="photo-img">
        <van-uploader preview-size="6.5625rem" v-model="fileList" multiple :after-read="afterRead" :max-count="max_count"
          :before-delete="beforeDelete">
          <div class="upload-area"></div>
        </van-uploader>
      </div>
    </div>
    <div class="photo">
      <p style="text-align: left;">
        <i class="iconfont icon-fontclass-ship" style="color: #3189E3;margin-right: .5rem;"></i>
        {{ form_cluster[7].title }}<span style="color: #AAAAB3 ;">（最多{{ count
        }}个，最长5分钟）</span>
      </p>
      <div class="video-list">
        <template v-if="fileListVideo && fileListVideo.length !== 0">
          <template v-for="(item, index) in fileListVideo">
            <div class="box-video">
              <video controls ref="video" preload="metadata" controlslist="nodownload" webkit-playsinline="true"
                x5-video-player-type="h5" playsinline x5-playsinline="" x5-video-orientation="portrait"
                x5-video-player-fullscreen="" autoplay="autoplay"
                style="margin-right:0.9375rem;width: 6.5625rem;height: 6.5625rem" :src="item">
                <source :src="item" type="video/ogg" />
                <source :src="item" type="video/mp4" />
                你的浏览器不支持video标签！
              </video>
              <div class="close" @click="del(index)">
                <van-icon name="cross" />
              </div>
            </div>
          </template>
        </template>
        <van-uploader v-if="fileListVideo.length !== count" accept="video/*" :preview-image="false"
          preview-size="6.5625rem" multiple :after-read="afterReadVideo" :max-count="max_count">
          <div class="upload-area"></div>
        </van-uploader>
      </div>
    </div>

    <van-popup v-model="show" position="bottom" round>
      <van-datetime-picker @cancel="cancel" @confirm="confirm" v-model="currentDate" type="date"
        :title="'请选择' + form_cluster[4].title" />
    </van-popup>


    <!-- 省市区地址选择器 s -->
    <yd-cityselect style="height: 80%;z-index:1000000" v-model="addressShow" :callback="addressCallback" :items="district"
      provance="广东省" city="汕尾市"></yd-cityselect>
    <!-- 省市区地址选择器 end -->



    <div style="background: #fff;margin-top: 1.2188rem;padding: .2813rem 1.0625rem;">
      <van-button color="#3189E3" round block @click="submit">提交</van-button>

    </div>
  </div>
</template>
<script>
import index_controller from "./index_controller";
export default index_controller;
</script>

<style lang="scss" scoped>
::v-deep .van-field__label {
  width: unset;
}

::v-deep .video-list .van-uploader__wrapper {
  flex-wrap: nowrap;
}

::v-deep .detail img {
  width: 100% !important;
  height: 100%;
}

::v-deep .van-uploader__input-wrapper {
  margin: 0 8px 8px 0;
  width: unset;
}

::v-deep .van-field {
  white-space: nowrap;
}

.random-shoot {

  .required-rows {
    position: relative;

    &::after {
      content: "*";
      position: absolute;
      right: -0.5rem;
      top: 0;
      color: red;
    }
  }

  .required {
    position: relative;

    &::after {
      content: "*";
      position: absolute;
      right: -10px;
      top: 0;
      color: red;
    }
  }

  .textarea,
  .photo {
    background: #fff;
    padding: 10px 16px;
  }

  .box-video {
    position: relative;
  }

  .close {
    position: absolute;
    top: 0;
    right: 0.9375rem;
    width: 14px;
    height: 14px;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 0 0 0 12px;
    z-index: 10;
  }

  .close .van-icon {
    position: absolute;
    top: -2px;
    right: -2px;
    color: #fff;
    font-size: 16px;
    transform: scale(.5);
  }

  video {
    z-index: 1;
  }

  .upload-area {
    position: relative;
    width: 6.5625rem;
    height: 6.5625rem;
    border-radius: 0.3125rem;
    border: 1px solid #CFCFCF;

    &::after {
      position: absolute;
      content: "";
      width: 1.5rem;
      height: 0.1875rem;
      background: #AAAAB3;
      border-radius: 0.3125rem;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &::before {
      position: absolute;
      content: "";
      width: 0.1875rem;
      height: 1.5rem;
      background: #AAAAB3;
      border-radius: 0.3125rem;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .box {
    margin-top: 1.2188rem;
    border: 1px solid #CFCFCF;
    overflow: hidden;
    border-radius: 0.3125rem;
  }

  .photo-img {
    margin-top: 1.2188rem;
    display: flex;
    flex-wrap: wrap;
  }

  .video-list {
    margin-top: 1.2188rem;
    display: flex;
    flex-wrap: nowrap;
  }

}</style>